<template>
  <div class="table-view">
    <el-card class="card-container">
      <!-- 按钮区域 -->
      <el-row
        type="flex"
        class="row-bg button-tab"
        justify="space-between">
        <el-row>
          <el-button type="primary" @click="saveBtn">保 存</el-button>
        </el-row>
        <el-input
          v-model="input"
          suffix-icon="el-icon-search"
          placeholder="请输入内容"
          class="search-input">
        </el-input>
    </el-row>
    <!-- 表单区域 -->
      <el-table
        :data="tableData"
        @selection-change="handleSelectionChange"
        border>
        <el-table-column
        type="selection"
        width="55">
        </el-table-column>

      <!-- 功能名称 -->
        <el-table-column
          prop="date"
          label="功能名称"
          width="180">
        </el-table-column>

        <!-- 描述 -->
        <el-table-column
          prop="name"
          label="描述"
          width="180">
        </el-table-column>

        <!-- 接口地址 -->
        <el-table-column
          prop="address"
          label="接口地址">
        </el-table-column>
      </el-table>

      <!-- 校色名称 -->
      <el-dialog
        title="校色名称"
        top="20vh"
        append-to-body
        :visible.sync="dialogVisible"
        width="30%">
        <el-input
          placeholder="请输入内容"
          v-model="input1"
          clearable>
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">关 闭</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import { roleData } from 'apis/plugins/mixin'
export default {
  name: 'TableView',
  mixins: [roleData],
  data() {
    return {
      input1: '',
      dialogVisible: false,
      multipleSelection: [],
    }
  },
  components: {
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    saveBtn() {
      this.dialogVisible = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() =>{
          done()
        })
        .catch( () => {})
    },
  },
}
</script>
<style lang="scss" scoped>
.table-view{
  height: 100%;
  .card-container {
    position: relative;
    height: 100%;
    .search-input {
      margin-left: 100px ;
      width: 300px;
    }
    .button-tab {
      padding-bottom: 20px;
    }
  }
}
.pages {
  /* 分页样式 */
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 20px;
}
</style>